<template>
  <div>
    <div class="header">
      <div>
        <img src="@/assets/image/user.png" alt="">
        <p>aaaaa</p>
      </div>
      <div>
        <div>
          <van-icon name="manager-o" />
          <p>会员中心</p>
        </div>
        <div>
          <van-icon name="setting-o" />
          <p>安全设置</p>
        </div>
        <div>
          <van-icon name="location-o" />
          <p>地址管理</p>
        </div>
      </div>
    </div>
    <div class="content">
      <div class="top">
        <p>我的收藏</p>
        <span>查看全部 ></span>
      </div>
      <div class="main">
        <ul>
          <li>
            <img src="https://zhoushugang.gitee.io/erabbit-client-pc-static/uploads/clothes_goods_5.jpg" alt="">
            <h5>111111</h5>
            <p>111111</p>
            <p>￥11111</p>
          </li>
          <li>
            <img src="https://zhoushugang.gitee.io/erabbit-client-pc-static/uploads/clothes_goods_7.jpg" alt="">
            <h5>2222222</h5>
            <p>22222222</p>
            <p>￥222222</p>
          </li>
          <li>
            <img src="https://zhoushugang.gitee.io/erabbit-client-pc-static/uploads/clothes_goods_6.jpg" alt="">
            <h5>333333</h5>
            <p>3333333</p>
            <p>￥333333</p>
          </li>
          <li>
            <img src="https://zhoushugang.gitee.io/erabbit-client-pc-static/uploads/clothes_goods_2.jpg" alt="">
            <h5>444444</h5>
            <p>444444</p>
            <p>￥444444</p>
          </li>
        </ul>
      </div>
    </div>
    <div class="content">
      <div class="top">
        <p>我的足迹</p>
        <span>查看全部 ></span>
      </div>
      <div class="main">
        <ul>
          <li>
            <img src="	https://yanxuan-item.nosdn.127.net/fcdcb840a0f5dd754bb8fd2157579012.jpg" alt="">
            <h5>111111</h5>
            <p>111111</p>
            <p>￥11111</p>
          </li>
          <li>
            <img src="	https://yanxuan-item.nosdn.127.net/fcdcb840a0f5dd754bb8fd2157579012.jpg" alt="">
            <h5>2222222</h5>
            <p>22222222</p>
            <p>￥222222</p>
          </li>
          <li>
            <img src="	https://yanxuan-item.nosdn.127.net/fcdcb840a0f5dd754bb8fd2157579012.jpg" alt="">
            <h5>333333</h5>
            <p>3333333</p>
            <p>￥333333</p>
          </li>
          <li>
            <img src="	https://yanxuan-item.nosdn.127.net/fcdcb840a0f5dd754bb8fd2157579012.jpg" alt="">
            <h5>444444</h5>
            <p>444444</p>
            <p>￥444444</p>
          </li>
        </ul>
      </div>
    </div>
    <div class="footer">
      <h4>猜你喜欢</h4>
      <van-swipe class="swipe" :autoplay="3000" indicator-color="white" >
        <van-swipe-item>
          <ul>
            <li>
              <img src="https://yanxuan-item.nosdn.127.net/084f82c43a71bbc4d280fbb09a47a028.jpg" alt="">
              <p>经典格子元素</p>
              <p>￥125</p>
            </li>
            <li>
              <img src="https://yanxuan-item.nosdn.127.net/084f82c43a71bbc4d280fbb09a47a028.jpg" alt="">
              <p>经典格子元素</p>
              <p>￥125</p>
            </li>
            <li>
              <img src="https://yanxuan-item.nosdn.127.net/084f82c43a71bbc4d280fbb09a47a028.jpg" alt="">
              <p>经典格子元素</p>
              <p>￥125</p>
            </li>
            <li>
              <img src="https://yanxuan-item.nosdn.127.net/084f82c43a71bbc4d280fbb09a47a028.jpg" alt="">
              <p>经典格子元素</p>
              <p>￥125</p>
            </li>
          </ul>
        </van-swipe-item>
        <van-swipe-item>
          <ul>
            <li>
              <img src="https://yanxuan-item.nosdn.127.net/084f82c43a71bbc4d280fbb09a47a028.jpg" alt="">
              <p>经典格子元素</p>
              <p>￥125</p>
            </li>
            <li>
              <img src="https://yanxuan-item.nosdn.127.net/084f82c43a71bbc4d280fbb09a47a028.jpg" alt="">
              <p>经典格子元素</p>
              <p>￥125</p>
            </li>
            <li>
              <img src="https://yanxuan-item.nosdn.127.net/084f82c43a71bbc4d280fbb09a47a028.jpg" alt="">
              <p>经典格子元素</p>
              <p>￥125</p>
            </li>
            <li>
              <img src="https://yanxuan-item.nosdn.127.net/084f82c43a71bbc4d280fbb09a47a028.jpg" alt="">
              <p>经典格子元素</p>
              <p>￥125</p>
            </li>
          </ul>
        </van-swipe-item>
        <van-swipe-item>
          <ul>
            <li>
              <img src="https://yanxuan-item.nosdn.127.net/084f82c43a71bbc4d280fbb09a47a028.jpg" alt="">
              <p>经典格子元素</p>
              <p>￥125</p>
            </li>
            <li>
              <img src="https://yanxuan-item.nosdn.127.net/084f82c43a71bbc4d280fbb09a47a028.jpg" alt="">
              <p>经典格子元素</p>
              <p>￥125</p>
            </li>
            <li>
              <img src="https://yanxuan-item.nosdn.127.net/084f82c43a71bbc4d280fbb09a47a028.jpg" alt="">
              <p>经典格子元素</p>
              <p>￥125</p>
            </li>
            <li>
              <img src="https://yanxuan-item.nosdn.127.net/084f82c43a71bbc4d280fbb09a47a028.jpg" alt="">
              <p>经典格子元素</p>
              <p>￥125</p>
            </li>
          </ul>
        </van-swipe-item>
        <van-swipe-item>
          <ul>
            <li>
              <img src="https://yanxuan-item.nosdn.127.net/084f82c43a71bbc4d280fbb09a47a028.jpg" alt="">
              <p>经典格子元素</p>
              <p>￥125</p>
            </li>
            <li>
              <img src="https://yanxuan-item.nosdn.127.net/084f82c43a71bbc4d280fbb09a47a028.jpg" alt="">
              <p>经典格子元素</p>
              <p>￥125</p>
            </li>
            <li>
              <img src="https://yanxuan-item.nosdn.127.net/084f82c43a71bbc4d280fbb09a47a028.jpg" alt="">
              <p>经典格子元素</p>
              <p>￥125</p>
            </li>
            <li>
              <img src="https://yanxuan-item.nosdn.127.net/084f82c43a71bbc4d280fbb09a47a028.jpg" alt="">
              <p>经典格子元素</p>
              <p>￥125</p>
            </li>
          </ul>
        </van-swipe-item>
      </van-swipe>
    </div>
  </div>
</template>

<script>
export default {
  name:'MyselfView',
  components:{
  }
}
</script>

<style lang="less" scoped>
  .header{
    width: 1000px;
    height: 132px;
    background-image: url('@/assets/image/bg.png');
    display: flex;
    justify-content: space-evenly;
    font-size: 16px;
    box-sizing: border-box;
    div{
      width: 500px;
      display: flex;
      justify-content: start;
      align-items: center;
      p{
        color: #fff;
      }
      img{
        // z-index: 1;
        width: 85px;height: 85px;
        border-radius: 50%;
        margin: 0 30px 0 70px;
      }
      div{
        display: flex;
        align-items: center;
        flex-flow: column;
        color: #fff;
        margin: 0 50px;
      }
    }
  }
  .content{
    width: 1000px;
    margin: 30px 0;
    box-sizing: border-box;
    .top{
      display: flex;
      justify-content: space-between;
      p{
        font-size: 20px;
      }
      span{
        font-size: 16px;
        color: #ccc;
      }
    }
    .main{
      width: 100%;
      margin: 0 auto;
      ul{
        width: 100%;
        height: 300px;
      li{
        float: left;
        padding: 20px 30px;
        text-align: center;
        img{
          width: 160px;
          height: 160px;
          background: aqua;
        }
        h5{
          font-size: 16px;
        }
        p{
          font-size: 14px;
          color: #ccc;
        }
        p:nth-child(2){
          font-size: 16px;
          color: #ff000f;
        }
      }
    }
    }
  }
  .footer{
    width: 1000px;
    height: 380px;
    h4{
      font-size: 20px;
    }
    .swipe{
      ul{
        li{
          float: left;
          margin: 15px;
          img{  
            width: 190px;
            height: 190px;
          }
          p{
            font-size: 20px;
            text-align: center;
            margin: 5px 0;
          }
          p:nth-child(3){
            font-size: 14px;
            color: #ff000f;
          }
        }
      }
      
    }
  }
</style>